<template>
  <el-container style="height: 100vh;">
    <el-aside width="200px" style="background-color: #f4f4f5;">
      <div class="logo-container">
        <h2>教师管理系统</h2>
      </div>
      <el-menu :default-active="activeMenu" class="el-menu-vertical" background-color="#f4f4f5" text-color="#303133"
        active-text-color="#409EFF" router>
        <el-menu-item index="/teacher/home">
          <el-icon><HomeFilled /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/teacher/assign-homework">
          <el-icon><Document /></el-icon>
          <span>布置作业</span>
        </el-menu-item>
        <el-menu-item index="/teacher/grade-homework">
          <el-icon><Edit /></el-icon>
          <span>批改作业</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="background-color: #fff; border-bottom: 1px solid #e6e6e6;">
        <div class="header-container">
          <div class="header-left">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/teacher/home' }">教师端</el-breadcrumb-item>
              <el-breadcrumb-item>{{ currentPath }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="header-right">
            <el-dropdown @command="handleCommand">
              <span class="user-info">
                <el-avatar :size="32" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                <span style="margin-left: 8px;">{{ teacherInfo.name }}</span>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="personalInfo">个人信息</el-dropdown-item>
                  <!-- <el-dropdown-item command="changePassword">修改密码</el-dropdown-item> -->
                  <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

  <!-- 个人信息弹窗 -->
  <el-dialog v-model="infoDialogVisible" title="个人信息" width="40%">
    <el-form :model="teacherInfo" label-width="80px" label-position="left">
      <el-form-item label="教师ID">
        <!-- 只展示 -->
        <span>{{ teacherInfo.teacherId }}</span>
      </el-form-item>
       <el-form-item label="工号">
        <!-- 只展示 -->
        <span>{{ teacherInfo.teacherNo }}</span>
      </el-form-item>
       <el-form-item label="姓名">
        <!-- 只展示 -->
        <span>{{ teacherInfo.name }}</span>
      </el-form-item>
      <el-form-item label="性别">
        <!-- 只展示 -->
        <span>{{ teacherInfo.gender }}</span>
      </el-form-item>
      <el-form-item label="院系">
        <el-input v-model="teacherInfo.department"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="teacherInfo.email"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="teacherInfo.phone"></el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input v-model="newPassword" type="password" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="confirmPassword" type="password" show-password></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="infoDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveInfo">保存修改</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { HomeFilled, Document, Edit } from '@element-plus/icons-vue'
import { getTeacherInfoAPI,updateTeacherInfoAPI } from '@/api/teacher'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const activeMenu = computed(() => route.path)

const currentPath = computed(() => {
  const pathMap = {
    '/teacher/home': '首页',
    '/teacher/assign-homework': '布置作业',
    '/teacher/grade-homework': '批改作业'
  }
  return pathMap[route.path] || '未知页面'
})

// 控制弹窗显示
const infoDialogVisible = ref(false)
// const passwordDialogVisible = ref(false)

// 教师信息
const teacherInfo = ref({
  department: "",
  email: "",
  gender: "",
  name: "",
  phone: "",
  teacherId: null,
  teacherNo: ""
})

// 修改密码相关
const newPassword = ref('')
const confirmPassword = ref('')

// 处理下拉菜单点击事件
const handleCommand = (command) => {
  if (command === 'personalInfo') {
    infoDialogVisible.value = true
  } else if (command === 'logout') {
    // 实现退出登录逻辑，例如清空 token，跳转到登录页
    userStore.reset()
    ElMessage.success('退出登录成功')
    router.push('/login')
  }
}
//校验逻辑
const validateTeacherForm = (teacherInfo, newPassword, confirmPassword) => {
  if (!teacherInfo.department) {
    ElMessage.error('院系不能为空')
    return false
  }

  if (!teacherInfo.email) {
    ElMessage.error('邮箱不能为空')
    return false
  }

  if (!teacherInfo.phone) {
    ElMessage.error('电话不能为空')
    return false
  }

  if (!newPassword || !confirmPassword) {
    ElMessage.error('新密码和确认密码不能为空')
    return false
  }

  if (newPassword.length < 6 || newPassword.length > 10) {
    ElMessage.error('新密码长度必须为6到10位')
    return false
  }

  if (newPassword !== confirmPassword) {
    ElMessage.error('新密码和确认密码不一致')
    return false
  }

  return true
}

// 处理保存个人信息
const handleSaveInfo = async () => {
  // 校验表单
  if (!validateTeacherForm(teacherInfo.value, newPassword.value, confirmPassword.value)) {
    return
  }
  // 调用后端接口保存教师信息
  const { data } = await updateTeacherInfoAPI({
    ...teacherInfo.value,
    password: newPassword.value
  })
  if (data.code === 200) {
    ElMessage.success('个人信息保存成功')
  } else if (data.code === 500) {
    ElMessage.error(data.msg)
  } else {
    ElMessage.error('保存个人信息失败')
  }
  infoDialogVisible.value = false
}

// 获取教师信息
const getTeacherInfo = async () => {
  try {
    // 调用后端接口获取教师信息
    const { data } = await getTeacherInfoAPI()
    if(data.code === 200) {
      teacherInfo.value = data.data[0]
    } else if (data.code === 500) {
      ElMessage.error(data.msg)
    } else {  
      ElMessage.error('获取教师信息失败')
    }
  } catch (error) {
    console.error('获取教师信息失败:', error)
    ElMessage.error('获取教师信息失败')
  }
}

// 页面加载完成后获取教师信息
onMounted(() => {
  getTeacherInfo()
})
</script>

<style scoped>
.logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e6e6e6;
}

.logo-container h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.el-menu-vertical {
  border-right: none;
}

.header-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.el-main {
  background-color: #f5f7fa;
  padding: 20px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

/* 调整表单项中文本的样式，使其与输入框对齐 */
.el-form-item span {
    display: inline-block;
    padding-left: 12px; /* 根据需要调整，使其与输入框内边距对齐 */
}
</style>
